<template>
  <div class="quest-container">
    <el-tabs type="border-card" class="demo-tabs" @tab-change="tabClick">
      <el-tab-pane v-for="item in dictKeys" :key="item.value">
        <template #label>
          <span class="custom-tabs-label">
            <span>{{ item.label }}</span>
          </span>
        </template>
        <div v-if="item.value === 'reel_info'">
          <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="卷轴价格">
              <el-input-number
                v-model="form.money"
                :min="0"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item
              label="引导描述"
              :rules="[
                {
                  required: true,
                  message: '请输入引导描述',
                  trigger: 'blur'
                }
              ]"
            >
              <el-input v-model="form.name" controls-position="right" placeholder="例:请前往大雁塔站点领取" />
            </el-form-item>
            <el-form-item
              label="联系电话"
              :rules="[
                {
                  required: true,
                  message: '请输入联系电话',
                  trigger: 'blur'
                }
              ]"
            >
              <el-input v-model.number="form.mobile" controls-position="right" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item
              label="地址名字"
              :rules="[
                {
                  required: true,
                  message: '请输入地图地址名字',
                  trigger: 'blur'
                }
              ]"
            >
              <el-input v-model="form.address" controls-position="right" placeholder="地图地址名字" />
            </el-form-item>
            <el-form-item
              label="经纬度"
              prop="lnglat"
              :rules="[
                {
                  required: true,
                  message: '请输入经纬度',
                  trigger: 'blur'
                }
              ]"
            >
              <el-input v-model="form.lnglat" placeholder="请输入经纬度" />
            </el-form-item>
          </el-form>
        </div>
        <div v-if="item.value === 'min_answers'">
          <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="最低站点答题次数">
              <el-input-number
                v-model="form.min_answers"
                controls-position="right"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="flex flex-center pd-24">
      <el-button type="primary" @click="submitHandle" size="large"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { apiDictKeys, apiDictInfo, apiDictSave } from '@/api/configuration';
import { ElMessage } from 'element-plus';
const dictKeys = ref([]);
const getDictKeys = async () => {
  const { data } = await apiDictKeys();
  dictKeys.value = data;
  if (data.length > 0) {
    tabClick(0);
  }
};
onMounted(() => {
  getDictKeys();
});
// 改变tab
const tabKey = ref('');
const tabClick = (i) => {
  tabKey.value = dictKeys.value[i].value;
};
// 查询配置
const getDictInfo = async () => {
  const { data } = await apiDictInfo({ key: tabKey.value });
  form.value = data;
};
watch(
  () => tabKey.value,
  () => {
    getDictInfo();
  }
);
const form = ref({});
// 保存
const submitHandle = async () => {
  const { code } = await apiDictSave({
    key: tabKey.value,
    data: form.value
  });
  if (code === 200) {
    ElMessage({
      type: 'success',
      message: '保存成功'
    });
  }
};
</script>

<style scoped>
.quest-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  padding: 16px;
  box-sizing: border-box;
}
</style>
